<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->

<ng-container *transloco="let t">
  <nav class="project-settings-nav">
    <button
      data-test="back-to-nav"
      (click)="navigateBack()"
      class="back-to-nav">
      <tui-svg
        class="back-icon"
        src="chevron-left"></tui-svg>
      <span class="project-data">
        <tg-ui-avatar
          class="project-data-image"
          type="light"
          [color]="project.color"
          [avatarUrl]="project.logoSmall"
          [name]="project.name">
        </tg-ui-avatar>
        <span class="project-data-name">
          {{ project.name }}
        </span>
      </span>
    </button>
    <div>
      <h2 class="project-settings-title">
        {{ t('project_settings.project_settings') }}
      </h2>
      <ul class="project-settings-menu">
        <li class="project-settings-menu-item">
          <a
            class="project-settings-menu-anchor"
            routerLink="./settings/members"
            routerLinkActive="active"
            data-test="members-settings">
            {{ t('commons.members') }}
          </a>
        </li>
        <li class="project-settings-menu-item menu-item-unfolded">
          <a
            class="project-settings-menu-anchor"
            routerLink="./settings/permissions"
            routerLinkActive="active">
            {{ t('project_settings.roles_and_permissions') }}
          </a>
          <ul class="project-settings-submenu">
            <li class="project-settings-submenu-item">
              <a
                class="project-settings-submenu-anchor"
                [class.active]="
                  currentFragment === 'member-permissions-settings'
                "
                routerLink="./settings/permissions"
                fragment="member-permissions-settings"
                data-test="member-permissions-settings-submenu-anchor">
                {{ t('project_settings.member_permissions') }}
              </a>
            </li>
            <li class="project-settings-submenu-item">
              <a
                class="project-settings-submenu-anchor"
                [class.active]="
                  currentFragment === 'public-permissions-settings'
                "
                routerLink="./settings/permissions"
                fragment="public-permissions-settings">
                {{ t('project_settings.public_permissions') }}
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</ng-container>
